<template>
  <div class="addLineWrap">
    <div class="addCont">
      <ul>
        <li class="clearfix list address" @click="choseAddress(0)">
          <span class="fl">起始地</span>
          <div class="fr">
            <span>{{startAddress}}</span>
            <i class="rightMore">〉</i>
          </div>
        </li>
        <li class="clearfix list address" @click="choseAddress(1)">
          <span class="fl">目的地</span>
          <div class="fr">
            <span>{{endAddress}}</span>
            <!-- <span class="place">请选择</span> -->
            <i class="rightMore">〉</i>
          </div>
        </li>
        <li class="clearfix list type">
          <span class="fl">类型</span>
          <div class="fr">
            <div class="radioWrap">
              <input class="magic-radio" type="radio" v-model="ifReturn" value="0" name="radio" id="11" checked>
              <label for="11">单程</label>
            </div>
            <div class="radioWrap">
              <input class="magic-radio" type="radio" v-model="ifReturn" value="1" name="radio" id="22" checked>
              <label for="22">往返</label>
            </div>
          </div>
        </li>
      </ul>
      <div class="btnGroup">
        <a href="javascript:;" @click="saveLine">确认添加</a>
      </div>
    </div>
    <mt-popup v-model="popupVisible" position="bottom">
      <div class="cityGroup">
        <div class="sureBtn clearfix">
          <span class="fl" @click="cancel">取消</span>
          <span class="fr" @click="sure">确定</span>
        </div>
        <mt-picker :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker>
        <!-- <p>地址3级联动：{{myAddressProvince}} {{myAddressCity}} {{myAddresscounty}}</p> -->
      </div>
    </mt-popup>
  </div>
</template>
<script>
  import ApiService from '@/services/API-servies'
  import {Picker, Popup} from 'mint-ui';
  import myaddress from '../../../static/address3.json'     //引入省市区数据
  export default {
    name: '',
    props: {},
    data() {
      return {
        popupVisible: false,
        chooseAdress: '',
        startAddress: '',
        endAddress: '',
        ifReturn: "0",
        guid:null,
        myAddressSlots: [
          {
            flex: 1,
            defaultIndex: 1,
            values: Object.keys(myaddress),  //省份数组
            className: 'slot1',
            textAlign: 'center'
          }, {
            divider: true,
            content: '-',
            className: 'slot2'
          }, {
            flex: 1,
            values: [],
            className: 'slot3',
            textAlign: 'center'
          }
        ],
        myAddressProvince: '省',
        myAddressCity: '市',
      }
    },
    created() {
    },
    methods: {
      onMyAddressChange(picker, values) {
        if (myaddress[values[0]]) {  //这个判断类似于v-if的效果（可以不加，但是vue会报错，很不爽）
          picker.setSlotValues(1, Object.keys(myaddress[values[0]])); // Object.keys()会返回一个数组，当前省的数组
          this.myAddressProvince = values[0];
          this.myAddressCity = values[1];
        }
      },
      choseAddress(type) {
        this.chooseAdress = type;
        this.popupVisible = true;
      },
      sure() {
        if (this.chooseAdress === 0) {
          this.startAddress = this.myAddressProvince + "-" + this.myAddressCity;
        } else if (this.chooseAdress === 1) {
          this.endAddress = this.myAddressProvince + "-" + this.myAddressCity;
        }
        ;
        this.popupVisible = false;
      },
      cancel() {
        this.popupVisible = false;
      }
      ,
      saveLine() {
        ApiService.line.add({
          startSiteName: this.startAddress,
          endSiteName: this.endAddress,
          ifReturn: this.ifReturn
        }).then((res) => {
          if (res.meta.retCode === '0') {
            this.$router.push({ name:"",path: '/followLine'});
          }
        });
      }
      ,
      editLine(){
        ApiService.line.edit({
          guid:this.guid,
          startSiteName: this.startAddress,
          endSiteName: this.endAddress,
          ifReturn: this.ifReturn
        }).then((res) => {
          if (res.meta.retCode === '0') {
            this.$router.push({ name:"",path: '/followLine'});
          }
        });
      },
      //ios 设置头部信息
      setIosTitleType(){
        let params = {
          isReturn: true,
          isSearch: false,
          isTitleSegment:false
        };
        this.$bridge.callhandler('needBarButton', params, (data) => {})
      }
    },
    mounted() {
      setTimeout(() => {
        if(this.$isBrower.isAndroid){
          }else if(this.$isBrower.isIos){
              this.setIosTitleType();
          }
        }, 0);
      this.$nextTick(() => { //vue里面全部加载好了再执行的函数  （类似于setTimeout）
        this.myAddressSlots[0].defaultIndex = 0
        // 这里的值需要和 data里面 defaultIndex 的值不一样才能够初始化
        //因为我没有看过源码（我猜测是因为数据没有改变，不会触发更新）
      });
    },
    components: {
      MtPopup: Popup,
      MtPicker: Picker
    }
  }
</script>
<style scoped lang="less" type="stylesheet/less">
  @import "~common/less/variable";

  #app{
    height: 1000px;
  }
  .addLineWrap{
    height: 100%;
    background: #fff;
    padding-left: 40px;
  .addCont{
    height: 666px;
  .list{
    line-height: 122px;
    border-bottom: 2px solid #ccc;
  .fl{
    font-size:30px;
    color: #666;
  }
  .fr{
  span{
    font-size:34px;
    color: #666;
    font-weight: 600;
  }
  .rightMore{
    font-size: 32px;
    color: #999;
  }
  .rightMore{
    margin: 0 20px;
  }
  .place{
    color: #AAA;
    font-weight: 400;
  }
  }
  &.type{
  .fr{
    width: 500px;
  .radioWrap{
    display: inline-block;
  &:last-child{
     margin-left: 80px;
   }
  label{
    font-size: 32px;
  &:before{
     top:8px
   }
  &:after{
     top:14px
   }
  }
  }
  }
  }
  }
  .btnGroup{
    padding-right: 40px;
    margin-top:70px;
  a{
    border-radius: 8px;
    display: block;
    background: @blue;
    color: #fff;
    font-size: 32px;
    line-height: 90px;
    text-align: center;
  }
  }
  }
  .mint-popup{
    width: 100%;
  .cityGroup{
    height: 500px;
  .sureBtn{
    background: #eee;
    font-size: 28px;
  span{
    padding: 10px 60px;
  }
  }
  }
  }
  }
</style>
